<template>
    <div >
 <!-- :style="{'margin-bottom':(m+1)%3==0 ?'50px':'0px'}" -->
       <div class="geweiwrapper" v-for="(item,m) in equipmentType" 
             :key="m">
          <div class="box-card" v-for="(n,index) in item" :key="index">
            <div class="item" :class="{sale:n.businessCode,free:n.flag==1?true:false,repair:n.flag==2?true:false}"
                 @click="selectequipment(item,index)">
              <h2 v-if="n.equipmentCode">{{ n.equipmentCode }}</h2>
              <h2 v-if="n.deadName">{{ n.deadName }}</h2>
              <h2 v-if="n.appointmentInTime">{{ n.appointmentInTime }}</h2>
            </div>
          </div>
        </div>
    </div>
       

</template>

<script>

  import * as Type from '@/api/service'

    export default {
        name: "aaaaa",
      data(){
        return{
          loading:false,
            //字典
      equipmentType:[],
          tableData: [],
          tableHeight:0,
          //按钮权限
          btnRight: {
            btnCeremonyHallSearch: true, //查询
            btnCeremonyHallExport: true,//导出excel
          }
        }
      },//载入按钮
      mounted(){
      this.loadcoldstorageequipmentwithalltype()
      },
      //注销window.onresize事件
    
      methods:{
        onSubmit(value){
          this.loading=true
          if (value) {
            this.pager.currentPage = 1;
          }
          var postData = {
            "businessCode": this.ruleForm.businessCode,
            "deadName": this.ruleForm.deadName,
            "businessType": this.ruleForm.businessType,
            "appointmentTimeStart": dataFormatetmd(new Date(this.ruleForm.appointmentTimeStart)),
            "appointmentTimeEnd": dataFormatetmd(new Date(this.ruleForm.appointmentTimeEnd)),
            "pageSize": this.pager.pageSize,
            "currentPage": this.pager.currentPage,
            "exportExcelFlag": 0,            //表示显示 1表示导出execl
            "orderField	":"",     //排序字段
            "orderType":""        //排序顺序
          }
          if (this.ruleForm.businessType == 0) {
            postData.businessType=null
          }
          //查询接口
          Type['loadMournCeremony'](postData).then(response => {
            const { data }=response;
            if (!data) {
              this.loading = false;
              this.$message('数据读取失败')
              return
            }
            this.tableData = data.list
            this.pager = data.pager
            this.loading=false
            //   //数据读取成功
          }).catch(error => {
            this.$message(error)
            this.loading=false
            this.tableData = []
          })
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pager.pageSize = size;
          this.onSubmit()
        },
        handleCurrentChange: function(currentPage){
          this.pager.currentPage = currentPage;
          this.onSubmit()  //点击第几页
        },
          loadcoldstorageequipmentwithalltype() {

      Type['loadcoldstorageequipmentwithalltype']().then(response => {
        let data = response.data;
        if (!data) {
          this.$message('数据读取失败')
          return
        }
        let obj = {};
        data.forEach(item => {
          if (!obj["" + item.rowNo]) {
            obj["" + item.rowNo] = []
            obj["" + item.rowNo].push(item)
          } else {
            obj["" + item.rowNo].push(item)
          }
        })
        for (let n in obj) {
          var sorted = obj[n].sort(function (x, y) {
            return x.columnNo - y.colusssmnNo;
          });
          obj[n] = sorted
        }
        this.equipmentType = obj;
        for (let i in this.equipmentType) {
          for (let j = 0; j < this.equipmentType[i].length; j++) {
            this.equipmentType[i][j].flag = false
          }
        }
      }).catch(error => {
        this.$message(error)
      })
    },
   
      }
    }
</script>


<style scoped>
  .w150{
    width:150px;
  }
.item {
  font-size: 16px;
  font-weight: 400;
  height: 90px;

  line-height: 30px;
  text-align: center;
  /* padding: 0 1em; */
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);;
  border: 1px solid #e9e9e9;
}

.item:hover {
  cursor: pointer;
}

.item:last-child {
  margin-bottom: 0px;
}

.item.sale {
  background-color: #FF6040;
}

.item.free {
  background: lightgreen;
}

.item.repair {
  background: yellow;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.geweiwrapper {
  display: flex;
  flex-wrap: nowrap;

  margin: 5px 0px;
  justify-content: space-between;
}

.box-card {
  /* flex: 0 0 200px; */
  flex: 0 0 6%;
  display: inline-block;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);;
  margin-bottom: 0px;
  height: 90px;
  /* margin-right: 30px; */
}
.box-card h2{
  font-size: 10px;
}
</style>

